<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" class="nav-item">
        <el-icon><HomeFilled /></el-icon>
        <span>主页</span>
      </el-menu-item>
      <el-menu-item index="2" class="nav-item">
        <el-icon><PictureFilled /></el-icon>
        <span>图片</span>
      </el-menu-item>
      <el-menu-item index="3" class="nav-item">
        <el-icon><VideoCameraFilled /></el-icon>
        <span>视频</span>
      </el-menu-item>
      <el-menu-item index="4" class="nav-item">
        <el-icon><UploadFilled /></el-icon>
        <span>上传</span>
      </el-menu-item>
    </el-menu>

    <!-- 顶部间距 -->
    <div class="h-6" />

    <!-- 主页标题 -->
    <div class="section-title">
      <el-icon><HomeFilled /></el-icon>
      <span>主页</span>
    </div>

    <!-- 轮播图 -->
    <div class="carousel-container">
      <el-carousel
        :interval="4000"
        type="card"
        height="500px"
        v-loading="loading"
        :motion-blur="true"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <div class="carousel-item">
            <el-image
              :src="item.url"
              fit="contain"
              style="width: 100%; height: 100%"
            />
            <div class="overlay"></div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 精选图片标题 -->
    <div class="section-title">
      <el-icon><PictureFilled /></el-icon>
      <span>精选图片</span>
    </div>

    <!-- 精选图片网格展示 -->
    <div class="image-grid">
      <div v-for="(img, idx) in imageUrls" :key="img.id" class="image-card">
        <div class="image-wrapper">
          <el-image
            :src="img.url"
            fit="contain"
            :preview-src-list="imageUrls.map((img) => img.url)"
            :initial-index="idx"
            show-progress
            preview-teleported
            preview-fullscreen
          />
          <div class="overlay"></div>
          <div class="image-name">{{ img.title || "未命名" }}</div>
        </div>
      </div>
    </div>

    <!-- 精选视频标题 -->
    <div class="section-title">
      <el-icon><VideoCameraFilled /></el-icon>
      <span>精选视频</span>
    </div>

    <!-- 精选视频列表 -->
    <div class="video-list">
      <div
        v-for="(video, idx) in videoList"
        :key="video.id"
        class="video-card"
        @mouseenter="handleVideoHover(idx)"
        @mouseleave="handleVideoLeave(idx)"
      >
        <div class="video-wrapper">
          <HlsVideo
            :src="video.url"
            ref="videoRefs"
            class="video-player"
            preload="metadata"
            muted
            playsinline
            @loadedmetadata="onVideoLoaded(idx, $event)"
            @loadeddata="handleVideoLoaded(idx, $event)"
            @error="handleVideoError(idx, $event)"
            @progress="handleVideoProgress(idx, $event)"
            @canplay="handleVideoCanPlay(idx, $event)"
          />
          <!-- 视频封面 -->
          <div class="video-cover">
            <img
              :src="video.coverImage || getDefaultCover(video.url)"
              class="cover-image"
              @error="handleThumbnailError(idx)"
              v-if="!videoErrorStates[idx]"
            />
            <!-- 默认封面 -->
            <div v-if="videoErrorStates[idx]" class="default-cover">
              <el-icon><VideoCameraFilled /></el-icon>
            </div>
          </div>
          <!-- 视频时长 -->
          <div class="video-duration">{{ videoDurations[idx] || "00:00" }}</div>
          <!-- 鼠标悬浮时显示播放按钮 -->
          <div
            v-if="hoverIndex === idx && !videoLoadErrors[idx]"
            class="video-overlay"
            @click="playVideo(idx)"
          >
            <div class="play-icon">▶</div>
          </div>
          <!-- 加载状态 -->
          <div v-if="videoLoadingStates[idx]" class="video-loading">
            <el-icon class="is-loading"><Loading /></el-icon>
          </div>
          <!-- 错误状态 -->
          <div v-if="videoErrorStates[idx]" class="video-error">
            <el-icon><Warning /></el-icon>
            <span>加载失败</span>
          </div>
        </div>
        <div class="video-info">
          <div class="video-title">{{ video.title || "未命名视频" }}</div>
          <div class="video-stats">
            <span class="play-count">
              <el-icon><View /></el-icon>
              {{ video.playCount || 0 }}
            </span>
            <span class="upload-time">{{ video.createdTime || "刚刚" }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import {
  getBannerList,
  getUserLikeImagesService,
  getUserLikeVideosService,
} from "@/api/daily.js";
import { getUserInfoService } from "@/api/user";
import useUserInfoStore from "@/stores/userInfo";
import {
  PictureFilled,
  VideoCameraFilled,
  HomeFilled,
  Edit,
  UploadFilled,
  View,
  Loading,
  Warning,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import HlsVideo from "@/components/HlsVideo.vue";

const userInfoStore = useUserInfoStore();
const router = useRouter();

interface BannerItem {
  id: number;
  url: string;
  title: string;
}

const activeIndex = ref("1");
const handleSelect = (key: string) => {
  switch (key) {
    case "1":
      router.push("/daily");
      break;
    case "2":
      router.push("/picture");
      break;
    case "3":
      router.push("/video");
      break;
    case "4":
      router.push("/upload");
      break;
  }
};

const imageUrls = ref<BannerItem[]>([]);
const bannerList = ref<BannerItem[]>([]);
const loading = ref(false);

const getUserInfo = async () => {
  try {
    const res = await getUserInfoService();
    userInfoStore.setInfo(res.data);
  } catch (error) {
    ElMessage.error("获取用户信息失败");
    console.error("获取用户信息失败:", error);
  }
};

const getUserLikeImages = async () => {
  try {
    const res = await getUserLikeImagesService();
    imageUrls.value = res.data;
  } catch (error) {
    console.error("获取喜欢的图失败:", error);
    ElMessage.error("获取喜欢的图失败");
  }
};

const fetchBannerList = async () => {
  const createId = userInfoStore.info.id;
  if (!createId) {
    ElMessage.warning("用户信息未加载，无法获取轮播图");
    return;
  }
  try {
    const res = await getBannerList(createId);
    bannerList.value = res.data;
  } catch (error) {
    console.error("获取轮播图失败:", error);
    ElMessage.error("获取轮播图失败");
  }
};

interface VideoItem {
  id: number;
  url: string;
  title: string;
  playCount?: number;
  createdTime: string;
  coverImage?: string;
}

const videoList = ref<VideoItem[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const hoverIndex = ref<number | null>(null);
const videoRefs = ref<HTMLVideoElement[]>([]);
const videoDurations = ref<string[]>([]);
const videoLoadingStates = ref<Record<number, boolean>>({});
const videoErrorStates = ref<Record<number, boolean>>({});
const videoLoadProgress = ref<Record<number, number>>({});

// 添加视频封面画布引用
const videoCovers = ref<Map<number, HTMLCanvasElement>>(new Map());
const videoLoadQueue = ref<Map<number, boolean>>(new Map());

// 添加封面状态管理
const hasCoverImage = ref<Record<number, boolean>>({});

// 设置视频封面引用
const setVideoCoverRef = (el: any, index: number) => {
  if (el) {
    videoCovers.value.set(index, el as HTMLCanvasElement);
    if (videoLoadQueue.value.get(index)) {
      captureFirstFrame(index);
    }
  } else {
    videoCovers.value.delete(index);
  }
};

// 处理视频加载完成
const handleVideoLoaded = (index: number, event: Event) => {
  try {
    const video = event.target as HTMLVideoElement;
    videoLoadQueue.value.set(index, true);

    // 如果Canvas已经准备好，立即捕获第一帧
    if (videoCovers.value.has(index)) {
      captureFirstFrame(index);
    }
  } catch (error) {
    console.error("处理视频加载完成事件失败:", error);
  }
};

// 捕获视频第一帧
const captureFirstFrame = (index: number) => {
  try {
    const video = videoRefs.value[index];
    const canvas = videoCovers.value.get(index);

    if (!video || !canvas) {
      console.warn("视频或Canvas元素未找到:", {
        video: !!video,
        canvas: !!canvas,
        index,
      });
      return;
    }

    // 设置画布尺寸
    const aspectRatio = video.videoWidth / video.videoHeight;
    let width = video.videoWidth || 640;
    let height = video.videoHeight || 360;

    // 移动端优化：限制最大尺寸
    const maxWidth = isMobile.value ? 320 : 640;
    const maxHeight = isMobile.value ? 180 : 360;

    if (width > maxWidth) {
      width = maxWidth;
      height = width / aspectRatio;
    }
    if (height > maxHeight) {
      height = maxHeight;
      width = height * aspectRatio;
    }

    canvas.width = width;
    canvas.height = height;

    // 绘制第一帧
    const ctx = canvas.getContext("2d");
    if (ctx) {
      ctx.drawImage(video, 0, 0, width, height);
      hasCoverImage.value[index] = true;
      videoLoadQueue.value.delete(index);

      // 移动端捕获完第一帧后暂停视频
      if (isMobile.value) {
        video.pause();
        video.currentTime = 0;
      }
    } else {
      console.warn("Failed to get canvas context");
    }
  } catch (error) {
    console.error("捕获视频第一帧失败:", error);
  }
};

// 添加加载状态管理
const loadingStates = ref<Record<number, boolean>>({});
const videoLoadErrors = ref<Record<number, boolean>>({});

const formatDuration = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
    .toString()
    .padStart(2, "0")}`;
};

// 优化视频加载函数
const getVideoList = async () => {
  const userId = userInfoStore.info.id;
  if (!userId) {
    ElMessage.warning("用户信息未加载，无法获取视频列表");
    return;
  }

  try {
    loadingStates.value = {};
    videoLoadErrors.value = {};
    videoCovers.value.clear();
    videoLoadQueue.value.clear();
    hasCoverImage.value = {};

    const res = await getUserLikeVideosService();
    if (!res.data) {
      throw new Error("获取视频列表数据为空");
    }
    videoList.value = res.data;

    await nextTick();
    videoRefs.value = Array.from(
      document.querySelectorAll(".video-player")
    ) as HTMLVideoElement[];

    // 为每个视频元素添加观察者
    videoRefs.value.forEach((video, index) => {
      if (video) {
        loadingStates.value[index] = true;
        video.setAttribute("data-index", index.toString());
        // 移动端直接加载视频以获取第一帧
        if (isMobile.value) {
          video.load();
        } else {
          observer.value?.observe(video);
        }
      }
    });
  } catch (error) {
    console.error("获取视频列表失败:", error);
    ElMessage.error("获取视频列表失败");
  }
};

// 播放视频
const playVideo = (index: number) => {
  try {
    const video = videoRefs.value[index];
    if (!video) {
      console.warn("视频元素不存在");
      return;
    }

    const videoUrl = videoList.value[index]?.url;
    if (!videoUrl) {
      ElMessage.error("视频地址无效");
      return;
    }

    videoLoadingStates.value[index] = true;
    videoErrorStates.value[index] = false;
    videoLoadProgress.value[index] = 0;

    // 恢复为直接设置视频源，让浏览器处理渐进式下载
    video.src = videoUrl;

    video.controls = true;
    video.muted = false;

    const fullscreenContainer = document.createElement("div");
    fullscreenContainer.className = "video-fullscreen-container";
    fullscreenContainer.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.9);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(5px);
    `;

    const videoContainer = document.createElement("div");
    videoContainer.style.cssText = `
      width: 80%;
      height: 80%;
      position: relative;
    `;

    const closeButton = document.createElement("button");
    closeButton.innerHTML = "×";
    closeButton.style.cssText = `
      position: absolute;
      top: -40px;
      right: 0;
      background: none;
      border: none;
      color: white;
      font-size: 30px;
      cursor: pointer;
      padding: 5px 10px;
    `;

    const videoClone = video.cloneNode(true) as HTMLVideoElement;
    videoClone.style.cssText = `
      width: 100%;
      height: 100%;
      object-fit: contain;
    `;

    videoContainer.appendChild(videoClone);
    videoContainer.appendChild(closeButton);
    fullscreenContainer.appendChild(videoContainer);
    document.body.appendChild(fullscreenContainer);

    // 视频加载和错误处理
    const handleVideoEvents = () => {
      videoLoadingStates.value[index] = false;
      videoErrorStates.value[index] = false;
    };

    const handleVideoError = (e: Event) => {
      const video = e.target as HTMLVideoElement;
      videoLoadingStates.value[index] = false;
      videoErrorStates.value[index] = true;

      let errorMessage = "视频播放失败";
      if (video.error) {
        switch (video.error.code) {
          case 1:
            errorMessage = "视频加载被中断";
            break;
          case 2:
            errorMessage = "网络错误，请检查网络连接";
            break;
          case 3:
            errorMessage = "视频解码失败，格式可能不支持";
            break;
          case 4:
            errorMessage = "视频格式不支持";
            break;
        }
      }
      ElMessage.error(errorMessage);
      document.body.removeChild(fullscreenContainer);
    };

    videoClone.addEventListener("loadeddata", handleVideoEvents);
    videoClone.addEventListener("error", handleVideoError);

    // 关闭视频
    const closeVideo = () => {
      videoClone.pause();
      // 检查元素是否存在于 DOM 中再移除
      if (document.body.contains(fullscreenContainer)) {
        document.body.removeChild(fullscreenContainer);
      }
      document.removeEventListener("keydown", handleEsc);
    };

    closeButton.onclick = closeVideo;
    fullscreenContainer.onclick = (e) => {
      if (e.target === fullscreenContainer) closeVideo();
    };

    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === "Escape") closeVideo();
    };
    document.addEventListener("keydown", handleEsc);

    videoClone.play().catch((error) => {
      console.error("视频播放失败:", error);
      videoErrorStates.value[index] = true;
      ElMessage.error("视频播放失败，请稍后重试");
      document.body.removeChild(fullscreenContainer);
    });
  } catch (error) {
    console.error("创建全屏播放器失败:", error);
    ElMessage.error("视频播放失败，请稍后重试");
  }
};

// 处理视频加载完成
const onVideoLoaded = (index: number, event: Event) => {
  try {
    const video = event.target as HTMLVideoElement;
    videoDurations.value[index] = formatDuration(video.duration);
    videoLoadingStates.value[index] = false;
    videoErrorStates.value[index] = false;
  } catch (error) {
    console.error("处理视频加载完成事件失败:", error);
  }
};

// 处理视频错误
const handleVideoError = (index: number, event: Event) => {
  const video = event.target as HTMLVideoElement;
  videoLoadingStates.value[index] = false;
  videoErrorStates.value[index] = true;

  if (video.error?.code === 4) return;

  let errorMessage = "视频加载失败";
  if (video.error) {
    switch (video.error.code) {
      case 1:
        errorMessage = "视频加载被中断";
        break;
      case 2:
        errorMessage = "网络错误，请检查网络连接";
        break;
      case 3:
        errorMessage = "视频解码失败，格式可能不支持";
        break;
      case 4:
        errorMessage = "视频格式不支持";
        break;
    }
  }
  ElMessage.error(errorMessage);
};

// 处理视频悬浮
const handleVideoHover = (index: number) => {
  try {
    hoverIndex.value = index;
    if (!isMobile.value) {
      if (!visibleVideos.value.has(index)) {
        visibleVideos.value.add(index);
      }
    } else {
      const video = videoRefs.value[index];
      if (video) {
        video.play().catch((error) => {
          console.error("视频播放失败:", error);
        });
      }
    }
  } catch (error) {
    console.error("处理视频悬浮事件失败:", error);
  }
};

// 处理视频离开
const handleVideoLeave = (index: number) => {
  try {
    hoverIndex.value = null;
    if (isMobile.value) {
      const video = videoRefs.value[index];
      if (video) {
        video.pause();
        video.currentTime = 0;
      }
    }
  } catch (error) {
    console.error("处理视频离开事件失败:", error);
  }
};

// 添加视频可见性控制
const visibleVideos = ref<Set<number>>(new Set());
const observer = ref<IntersectionObserver | null>(null);

// 检查视频是否应该加载
const isVideoVisible = (index: number) => {
  // 移动端只在播放时显示视频
  if (isMobile.value) {
    return hoverIndex.value === index;
  }
  return visibleVideos.value.has(index);
};

// 添加移动端检测
const isMobile = ref(false);

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

// 初始化 Intersection Observer
const initIntersectionObserver = () => {
  observer.value = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        const index = parseInt(entry.target.getAttribute("data-index") || "0");
        if (entry.isIntersecting) {
          visibleVideos.value.add(index);
        } else {
          visibleVideos.value.delete(index);
        }
      });
    },
    {
      rootMargin: "50px 0px",
      threshold: 0.1,
    }
  );
};

// 获取默认封面
const getDefaultCover = (videoUrl: string) => {
  // 如果视频URL是完整的URL，则替换为默认封面URL
  if (videoUrl.startsWith("http")) {
    return videoUrl.replace(/\.[^/.]+$/, "_thumb.jpg");
  }
  return videoUrl;
};

// 处理缩略图加载错误
const handleThumbnailError = (index: number) => {
  videoErrorStates.value[index] = true;
};

// 在 script setup 部分添加新的处理函数
const handleVideoProgress = (index: number, event: Event) => {
  const video = event.target as HTMLVideoElement;
  if (video.buffered.length > 0) {
    const bufferedEnd = video.buffered.end(video.buffered.length - 1);
    const duration = video.duration;
    const progress = (bufferedEnd / duration) * 100;
    videoLoadProgress.value[index] = progress;
  }
};

const handleVideoCanPlay = (index: number, event: Event) => {
  const video = event.target as HTMLVideoElement;
  videoLoadingStates.value[index] = false;
  videoErrorStates.value[index] = false;
};

onMounted(async () => {
  loading.value = true;
  initIntersectionObserver();
  await getUserInfo();
  await Promise.all([fetchBannerList(), getUserLikeImages(), getVideoList()]);
  checkMobile();
  window.addEventListener("resize", checkMobile);
  loading.value = false;
});

// 优化组件卸载
onUnmounted(() => {
  observer.value?.disconnect();
  // 清理所有视频资源
  videoRefs.value.forEach((video) => {
    video.pause();
    video.src = "";
    video.load();
  });
  // 清理画布引用和加载队列
  videoCovers.value.clear();
  videoLoadQueue.value.clear();
  window.removeEventListener("resize", checkMobile);
});
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  padding-bottom: 40px;
  background: #f5f7fa;
}

.el-menu--horizontal {
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-bottom: none !important;
}

.el-menu--horizontal .el-menu-item {
  border-bottom: none !important;
}

.nav-item {
  position: relative;
  padding: 0 16px;
  color: #303133;
  transition: all 0.3s ease;
}

.nav-item span {
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease;
}

.nav-item .el-icon {
  margin-right: 8px;
  color: #303133;
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav-item:hover,
.nav-item.is-active {
  color: #409eff;
}

.nav-item:hover .el-icon,
.nav-item.is-active .el-icon {
  color: #409eff;
  transform: scale(1.1);
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #409eff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-item:hover::after,
.nav-item.is-active::after {
  width: 60%;
}

.section-title {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 40px 0 20px;
  padding-left: 12px;
  border-left: 4px solid #409eff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title .el-icon {
  font-size: 24px;
  color: #409eff;
}

.carousel-container {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.carousel-container :deep(.el-carousel__item) {
  border-radius: 12px;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  transform-origin: center;
}

.carousel-item:hover {
  transform: scale(1.02);
}

.carousel-item .el-image {
  border-radius: 12px;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transition: background 0.3s ease;
  border-radius: 12px;
}

.carousel-item:hover .overlay {
  background: rgba(0, 0, 0, 0.1);
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.image-card {
  width: 260px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}

.image-wrapper .el-image {
  width: 100%;
  height: 100%;
}

.image-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
}

.image-card:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.image-card:hover .image-name {
  background: rgba(0, 0, 0, 0.7);
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .carousel-container {
    padding: 0 10px;
  }

  .image-grid {
    padding: 0 10px;
    gap: 10px;
  }

  .image-card {
    width: calc(50% - 10px);
  }

  .image-wrapper {
    height: 200px;
  }
}

.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.video-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  background: #000;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-player::-webkit-media-controls {
  display: flex !important;
  opacity: 1 !important;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.default-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1a1a;
  color: #666;
}

.default-cover .el-icon {
  font-size: 48px;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease;
  z-index: 2;
}

.video-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}

.play-icon {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  transition: transform 0.3s ease;
}

.video-overlay:hover .play-icon {
  transform: scale(1.1);
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 14px;
  font-weight: 500;
  color: #18191c;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.video-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9499a0;
  font-size: 12px;
}

.play-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.play-count .el-icon {
  font-size: 14px;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .video-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    padding: 0 15px;
  }

  .video-wrapper {
    padding-top: 56.25%;
  }

  .play-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .default-cover .el-icon {
    font-size: 36px;
  }

  .video-card {
    touch-action: manipulation;
  }
}

.fullscreen-button {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  z-index: 10;
  font-size: 16px;
  transition: background 0.3s ease;
}

.fullscreen-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: #fff;
  font-size: 24px;
}

.video-fullscreen-container {
  backdrop-filter: blur(5px);
}

/* 添加暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .video-card {
    background: #1a1a1a;
  }

  .video-title {
    color: #e0e0e0;
  }

  .video-stats {
    color: #a0a0a0;
  }
}

.video-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: #f56c6c;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.video-error .el-icon {
  font-size: 24px;
}
</style>
